<template>
  <a-flex align="center" :gap="8">
    <a-image :src="OSS_IMG_URL(src)" :fallback="imgErrSrc" :width="48" :height="48" />
    <a-flex vertical>
      <div class="title">{{ title }}</div>
      <div v-if="!isNil(price)">￥{{ price}}</div>
    </a-flex>
  </a-flex>
</template>

<script>
  import { defineComponent, reactive, toRefs } from 'vue';
  import { imgErrSrc, OSS_IMG_URL } from '@/api/ds';
  import {isNil} from "@/api/util.js";

  export default defineComponent({
    components: {},
    props: {
      src: String,
      title: String,
      price:Number,
    },
    setup() {
      const state = reactive({
        imgErrSrc,
      });

      return {
        ...toRefs(state),
        OSS_IMG_URL,
        isNil,
      };
    },
  });
</script>
<style lang="less" scoped>
  .title {
    flex: 1;
    text-align: left;
    word-wrap: break-word;
    word-break: break-all;
  }
</style>
